<template>
    <!-- 通话窗口组件 -->
    <TelephoneWin>
        <!-- 通话窗口插槽 -->
        <TelephoneSlot>
            <!-- 通话窗口主屏幕插槽 -->
            <template #main-screen>
                <video src="" width="100%" height="100%"></video>
            </template>
            <template #main-screen-nick>
                用户昵称
            </template>
            <!-- 右侧列表插槽 -->
            <template #list-screen>
                <div class="list">
                    <div class="item" v-for="(item, index) in 10" :key="index">
                        <video v-if="index % 2 == 0" src="" width="100%" height="100%"></video>
                        <div v-else class="user-ipc">
                            <img src="http://127.0.0.1:7878/user2.png" alt="">
                        </div>
                        <div class="item-nick">用户昵称{{ item }}</div>
                    </div>
                </div>
            </template>
        </TelephoneSlot>
    </TelephoneWin>
</template>

<script setup lang="ts">
import TelephoneWin from '@/components/TelephoneWin/index.vue'
import TelephoneSlot from '@/components/TelephoneSlot/index.vue'
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'
const $route = useRoute()

onMounted(() => {
    let sourceId = ($route.query.sourceId) as string
    getScreen(sourceId).then((stream) => {
        let videos = document.querySelectorAll('video')
        videos.forEach(video => {
            video!.srcObject = stream
            video!.play()
        })
    }).catch(error => {
        console.log(error)
    })
})

// 获取屏幕信息
const getScreen = async (sourceId: string) => {
    const stream = await navigator.mediaDevices.getUserMedia({
        audio: false,
        video: <any>{
            mandatory: {
                chromeMediaSource: 'desktop',
                chromeMediaSourceId: sourceId,
                maxFrameRate: 120, // 帧率
                minWidth: 1280,
                maxWidth: 1280,
                minHeight: 720,
                maxHeight: 720
            }
        }
    })
    return stream
}
</script>

<style scoped lang="scss">
.list {
    width: 100%;
    height: 100%;
    overflow: auto;

    &::-webkit-scrollbar {
        display: none;
    }

    .item {
        width: 100%;
        height: 120px;
        background-color: #292929;
        margin-bottom: 10px;
        color: #fff;
        border: 2px solid #2c2c2c;
        border-radius: 5px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        &:nth-last-of-type(1) {
            margin: 0;
        }
        .user-ipc {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            overflow: hidden;
            img {
                width: 100%;
                height: 100%;
            }
        }

        .item-nick {
            position: absolute;
            left: 5px;
            bottom: 5px;
            color: #797979;
            font-size: 12px;
            max-width: 100px;
            display: flex;
            align-items: flex-end;
        }
    }
}
</style>